import 'dart:convert';

import 'package:flutter/material.dart';

class SliderPage extends StatefulWidget {
  const SliderPage({Key? key}) : super(key: key);

  @override
  State<SliderPage> createState() => _SliderPageState();
}

class _SliderPageState extends State<SliderPage> {
  double sliderValue = 50;
  @override
  Widget build(BuildContext context) {
    double width = MediaQuery.of(context).size.width;
    return Scaffold(
      appBar: AppBar(
        title: Text(
          "滑块Slider的使用"
        ),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            Container(
              width:width,
              height: 300,
              alignment: Alignment.center,
              color:Colors.grey,
              child: Slider(
                value: sliderValue, 
                label: "$sliderValue",
                activeColor: Colors.red,
                inactiveColor: Colors.blue,
                onChanged: (value){
                  setState(() {
                    sliderValue = value;
                  });

                },
                min: 0,
                max: 100,
                ),
            )
          ],
        ),
      ),
    );
  }
}